window.onload = function () {
    let spans = document.querySelectorAll('.round')
    let btnL = document.querySelector('.btnLeft')
    let btnR = document.querySelector('.btnRight')
    let btns = document.querySelectorAll('.btn')
    let img = document.querySelector('.content')
    let imgs = document.querySelectorAll('.box ul')
    let box = document.querySelector('.box')
    let index = 0
    let sindex = 0
    let timer
    auto()
    box.addEventListener("mouseover", function () {
        clearInterval(timer)
        for (let i = 0; i < btns.length; i++) {
            btns[i].style.display = 'block'
        }
    })
    box.addEventListener("mouseout", function () {
        auto()
        for (let i = 0; i < btns.length; i++) {
            btns[i].style.display = 'none'
        }
    })

    function auto() {
        timer = setInterval(function () {
            change(true)
        }, 3000)
    }

    function change(boolean) {
        spans[sindex].classList.remove('on')
        if (boolean) {
            index++;
            sindex++
            startMove(img, { left: -1500 * index }, 200, 'linear', function () {
                if (index >= imgs.length - 1) {
                    index = 0
                    img.style.left = '0px'
                }
            })
        } else {
            index--;
            sindex--
            startMove(img, { left: -1500 * index }, 200, 'linear', function () {
                if (index <= 0) {
                    index = imgs.length - 1
                    img.style.left = -1500 * index + 'px'
                }
            })
        }
        if (sindex >= spans.length) {
            spans[0].classList.add('on')
            sindex = 0
            return
        }
        if (sindex < 0) {
            spans[spans.length - 1].classList.add('on')
            sindex = spans.length - 1
            return;
        }
        spans[sindex].classList.add('on')
    }

    btnR.addEventListener('click', function () {
        change(true)
    })
    btnL.addEventListener('click', function () {
        change(false)
    })
    for (let i = 0; i < spans.length; i++) {
        spans[i].index = i
        spans[i].addEventListener('mouseover', function () {
            for (let j = 0; j < spans.length; j++) {
                spans[j].classList.remove('on')
            }
            sindex = this.index
            index = this.index
            startMove(img, { left: -1500 * index }, 200, 'linear')
            spans[i].classList.add('on')
        })
    }
}
let index1 = 0
let tabcs = document.querySelectorAll('.tabc')
let options = document.querySelectorAll('.option')
let left1 = document.querySelector('#report .left')
for (let i = 0; i < options.length; i++) {
    options[i].addEventListener("click", function () {
        for (let j = 0; j < options.length; j++) {
            options[j].classList.remove('on1')
            tabcs[j].classList.remove('block')
            left1.style.opacity = 0
        }
        options[i].classList.add('on1')
        tabcs[i].classList.add('block')
        setTimeout(() => {
            left1.style.opacity = 1
        }, 500)
        index1 = i
        let mes = tabcs[index1].querySelectorAll('.the')
        for (let j = 0; j < mes.length; j++) {
            if (j > 4) {
                mes[j].remove()
            }
        }
    })
}
let more = document.querySelector('.more')
let one = document.querySelectorAll('.the')[0]
more.addEventListener('click', function () {
    console.log(1)
    let ones = one.cloneNode(true)
    tabcs[index1].appendChild(ones)
})

//展开
let arr = [
    {
        img: './img/融智e信/1.png',
        txt: '宏观'
    }, {
        img: './img/融智e信/2.png',
        txt: '金融'
    }, {
        img: './img/融智e信/3.png',
        txt: '企业管理'
    }, {
        img: './img/融智e信/4.png',
        txt: '投行'
    }, {
        img: './img/融智e信/5.png',
        txt: '每日速递'
    }, {
        img: './img/融智e信/6.png',
        txt: '互联网金融'
    }, {
        img: './img/融智e信/7.png',
        txt: '旅游'
    }, {
        img: './img/融智e信/8.png',
        txt: '教育'
    }, {
        img: './img/融智e信/9.png',
        txt: '先进教育'
    }, {
        img: './img/融智e信/10.png',
        txt: '物流'
    }, {
        img: './img/融智e信/11.png',
        txt: '医药'
    }, {
        img: './img/融智e信/12.png',
        txt: '农业'
    }, {
        img: './img/融智e信/13.png',
        txt: '消费'
    }, {
        img: './img/融智e信/14.png',
        txt: '文化传媒'
    }, {
        img: './img/融智e信/15.png',
        txt: '交通'
    }, {
        img: './img/融智e信/16.png',
        txt: '信息技术'
    }, {
        img: './img/融智e信/17.png',
        txt: '能源'
    }, {
        img: './img/融智e信/18.png',
        txt: '工业'
    }, {
        img: './img/融智e信/19.png',
        txt: '新兴产业'
    }, {
        img: './img/融智e信/20.png',
        txt: '汽车'
    }, {
        img: './img/融智e信/21.png',
        txt: '传统制造'
    }, {
        img: './img/融智e信/22.png',
        txt: '环保'
    }, {
        img: './img/融智e信/23.png',
        txt: '城市建设'
    }, {
        img: './img/融智e信/24.png',
        txt: '房地产'
    }, {
        img: './img/融智e信/25.png',
        txt: '化工'
    }, {
        img: './img/融智e信/26.png',
        txt: '轻工'
    }, {
        img: './img/融智e信/27.png',
        txt: '外贸'
    }, {
        img: './img/融智e信/28.png',
        txt: '租赁'
    }, {
        img: './img/融智e信/29.png',
        txt: '海洋工程'
    }, {
        img: './img/融智e信/30.png',
        txt: '区域专题'
    }, {
        img: './img/融智e信/31.png',
        txt: '行业专题'
    }
]
let opens = document.querySelector('.contents_box')
let oppo = document.querySelector('.oppo')
let div = document.createElement('div')
let index2 = 0
div.className = 'imgs_box flex loca on'
let html = ''
for (let i = 0; i < arr.length; i++) {
    html += `
    <div class = 'img_bg' style = "background-image:url(${arr[i].img});">
    <span class='txt_line'>${arr[i].txt}</span>
    </div>
    `
}
div.innerHTML = html
opens.appendChild(div)
oppo.addEventListener('click', function () {
    if (oppo.textContent === "展开") {
        if (!index2) {
            opens.style.height = '1860px'
            oppo.innerHTML = '收起'
        } else {
            opens.style.height = '527px'
            oppo.innerHTML = '收起'
        }
    } else {
        opens.style.height = '527px'
        oppo.innerHTML = '展开'
    }
})
let box111 = document.querySelector('#box')
let div1 = div.cloneNode(true)
div1.clientHeight = '880px!important'
let iiii = div1.children
let arr1 = ['意大利', '美国', '塞尔维亚', '英国', '土耳其', '坦桑尼亚', '瑞典', '墨西哥']
for (let i = 0; i < iiii.length; i++) {
    if (i <= 7) {
        iiii[i].outerHTML = `
        <div class=\"img_bg\" style=\"background-image:url(./img/融智e信/c${i}.png);\">
        <span class=\"txt_line\">${arr1[i]}</span>
        </div>
        `
    }
    if (i > 7) {
        iiii[i].remove()
        i--;
    }
}

div1.classList.remove('on')
div1.classList.add('h0')
opens.appendChild(div1)
let contents_box_words = document.querySelectorAll('.contents_box_word')
let imgs_boxs = document.querySelectorAll('.imgs_box')
for (let i = 0; i < contents_box_words.length; i++) {
    contents_box_words[i].addEventListener('click', function () {
        for (let j = 0; j < contents_box_words.length; j++) {
            contents_box_words[j].classList.remove('c945')
            imgs_boxs[j].classList.remove('on')
            imgs_boxs[j].classList.add('h0')
        }
        contents_box_words[i].classList.add('c945')
        imgs_boxs[i].classList.add('on')
        imgs_boxs[i].classList.remove('h0')
        opens.style.height = '527px'
        index2 = i
    })
}